<template>
    <el-row justify="space-between">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
            <div class="collpase-option">
                <el-tooltip class="box-item" effect="dark" content="折叠/展开导航栏" placement="right-start">
                    <el-icon @click="handleCollapse">
                        <transition enter-active-class="animate__animated animate__flipInY"
                            leave-active-class="animate__animated animate__flipOutY">
                            <component :is="isCollapse ? 'Expand' : 'Fold'"></component>
                        </transition>
                    </el-icon>

                </el-tooltip>

            </div>
        </el-col>


        <el-col :xs="14" :sm="12" :md="8" :lg="4" :xl="4">
            <div class="header">
                <div class="header-button-group">
                    <el-icon> <router-link :to="{ name: 'TodoAll' }">
                            <House />
                        </router-link></el-icon>
                    <el-icon> <router-link :to="{ name: 'Settings' }">
                            <Setting />
                        </router-link></el-icon>
                    <el-icon>
                        <FullScreen />
                    </el-icon>
                </div>

                <div class="header-user-layout">

                    <el-dropdown @command="handleCommand">
                        <div class="el-dropdown-link">
                            <el-avatar :src="state.avatar" alt=""></el-avatar>
                            <span>{{ state.nickname }}</span>
                            <el-icon><arrow-down />
                            </el-icon>
                        </div>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="1">首页</el-dropdown-item>
                                <el-dropdown-item command="2">个人中心</el-dropdown-item>
                                <el-dropdown-item command="3">代码仓库</el-dropdown-item>
                                <el-dropdown-item command="4">Action 4</el-dropdown-item>
                                <el-dropdown-item command="5">Action 4</el-dropdown-item>
                                <el-dropdown-item divided> <el-button @click="showExitDialog" type="danger">退出登陆</el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>


        </el-col>



    </el-row>


    <el-dialog v-model="centerDialogVisible" title="Warning" width="30%" align-center>
        <span>确定要退出吗？</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取消</el-button>
                <el-button type="danger" @click="centerDialogConfirm">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>

import useStore from '../../store';
import { useRouter } from "vue-router";
import { nextTick } from 'process';
import { onMounted, ref, inject, reactive } from 'vue';
import requestMethods from '../../api/api';
import { ElNotification } from 'element-plus';
const router = useRouter()

const { isCollapse, handleCollapse } = inject('isCollapse')


const avatarUrl = ref()

const state = reactive(useStore().user.userinfo);
const { nickname, avatar } = state;

const serverUrl = process.env.VUE_APP_AVATAR_API;

const centerDialogVisible = ref(false);

const handleCommand = (command) => {
    switch (command) {
        case '1':
            router.push("/todo/all");
            break;
        case '2':
            router.push("/userinfo");
            break;
        case '3':
            window.open("https://gitee.com/zjinx/vue-abletodilist", '_blank')
            break;
        default:
            return null
    }

}

onMounted(() => {


    requestMethods.getAvatar()
        .then(
            res => {



                // 将 Data URL 绑定到 avatarUrl 属性上，以在 img 标签中显示图片
                avatarUrl.value = `${serverUrl}/${res.data.avatar.replace(/\\/g, '/')}`

                useStore().user.userinfo.avatar = avatarUrl.value

                console.log(avatarUrl.value);

            }
        ).catch(
            error => {
                ElNotification({
                    title: '错误',
                    message: error,
                    type: 'error',
                })
            }
        )
    console.log(useStore().user.userinfo);
    console.log(nickname, avatar);
})



const centerDialogConfirm = () => {

    nextTick(() => {
        router.push('/login')
        useStore().user.$reset();
    }, 2000)

}
const showExitDialog = () => {

    centerDialogVisible.value = true

}
</script>

<style scoped lang="less">
.el-row {

    width: 100%;
    height: 100%;

    .el-col {
        height: 100%;

        .collpase-option {
            height: 100%;
            display: flex;
            align-items: center;

            .el-icon {
                padding: 10px;
                transition: all 0.5s ease;

                &:hover {
                    box-shadow: 8px 0px 7px 0px rgba(0, 0, 0, 0.1), 0px -8px 7px 0px rgba(0, 0, 0, 0.1), 0px 8px 7px 0px rgba(0, 0, 0, 0.1), -8px 0px 7px 0px rgba(0, 0, 0, 0.1);
                    color: #fff;
                    background-color: var(--el-color-primary);
                    transition: all 0.5s ease;
                    border-radius: 20%;
                }
            }
        }
    }

    .header {

        height: 100%;
        display: flex;

        &-button-group {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            padding-right: 10px;

            .el-icon {
                height: 100%;
                transition: 0.3s ease;
                padding: 0 10px;

                &:hover {
                    color: #666;
                    background-color: #fff;

                    transition: identifier 0.3s ease;



                }
            }

        }


        &-user-layout {
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            width: 80%;

        }



    }

}

.router-link {

    width: 100%;
    display: flex;
    justify-content: center;
}

a {
    color: black;
}

.flip-enter-active,
.flip-leave-active {
    transition: all 10.5s;
}

.flip-enter,
.flip-leave-to {
    transform: rotateY(180deg);
}

.el-dropdown {
    height: 100%;
    width: 100%;
}

.el-dropdown-link {
    width: 100%;

    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

}
</style>